<template>
  <div class="box">
    <el-button @click="add" type="primary">新增角色</el-button>
    <el-card class="box-card" v-for="(item , index) in roleArr" :key="index">
      <div slot="header" class="clearfix">
        <span>{{item.title}}</span>
        <div v-if="index" style="float: right;">
          <el-button type="text" @click="remove(item.id)">删除</el-button>
          <el-button type="text" @click="amend(item)">修改</el-button>
          <el-button type="text" @click="doSave(item)">保存</el-button>
        </div>
      </div>
      <div class="text item">
        <table class="tb" border="1" cellspacing="0">
          <tr class="tro">
            <template v-for="(mues,index)  in routerArr">
              <td v-if="mues.children.length == 1" :key="index">{{mues.children[0].meta.title}}</td>
              <td v-else :key="index">{{mues.meta.title}}</td>
            </template>
          </tr>
          <tr class="trt">
            <template v-for="(mues,index)  in routerArr">
              <td :key="index">
                <el-checkbox-group v-model="item.items">
                  <template v-if="mues.children.length == 1">
                    <el-checkbox :disabled="disabledFn(item)" :label="mues.children[0].meta.title"></el-checkbox>
                  </template>
                  <template v-else>
                    <el-checkbox
                      :disabled="disabledFn(item)"
                      v-for="(Sitm,Sindex) in mues.children"
                      :key="Sindex"
                      :label="Sitm.meta.title"
                    ></el-checkbox>
                  </template>
                </el-checkbox-group>
              </td>
            </template>
          </tr>
        </table>
      </div>
    </el-card>

    <el-dialog title="添加角色" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="英文" :label-width="formLabelWidth">
          <el-input v-model="form.role" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="中文" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onsubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { asyncRouter } from "../../router";
export default {
  name: "permission",
  data() {
    return {
      tableData: [],
      form: {
        items: [],
      },
      dialogFormVisible: false,
      formLabelWidth: "120px",
    };
  },
  methods: {
    ...mapActions("permission", ["getper", "postRole", "removeRole"]),
    cc(item) {},
    disabledFn(item) {
      if (item.role == "admin") {
        return true;
      }
      return false;
    },
    // 新增角色
    add() {
      this.dialogFormVisible = true;
    },
    // 修改角色
    amend(item) {
      this.form = { ...item };
      this.dialogFormVisible = true;
    },
    // 保存权限
    doSave(item) {
      this.form = { ...item };
      this.dialogFormVisible = true;
    },
    // 新增  修改
    onsubmit() {
      let from = { ...this.form };
      from.items = JSON.stringify(from.items);
      this.postRole(from);
      this.dialogFormVisible = false;
      this.form = {};
    },
    // 删除角色
    remove(id) {
      this.removeRole(id);
    },
  },
  computed: {
    routerArr() {
      //   let dd = [
      //     "仪表盘",
      //     "类别管理",
      //     "商品列表",
      //     "三级分类",
      //     "权限管理",
      //     "抢购管理",
      //     "商品管理",
      //   ];
      //   console.log(JSON.stringify(dd));
      let arr = [...this.$router.options.routes, ...asyncRouter];
      arr = arr.filter((v) => !v.hidden);
      return arr;
    },
    ...mapState("permission", ["roleArr"]),
  },
  mounted() {
    this.getper();
  },
};
</script>

<style scoped>
.box {
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  margin-top: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.dv {
  margin-top: 20px;
  /* overflow: hidden; */
}

.sp {
  line-height: 40px;
  font-weight: bolder;
  font-size: 25px;
}

.tb {
  width: 100%;
  border: 1px solid #409eff;
}

.tro {
  background-color: #409eff;
  color: #fff;
  font-weight: bolder;
}

td {
  border: 1px solid #409eff;
  padding: 5px;
}

/* .el-checkbox-group {
  width: 50px;
} */

.el-checkbox {
  display: block;
}
</style>